import React, { Component } from "react";
import './DouyinDetail.css';
import axios from 'axios';
import qs from 'qs';
export default class DouyinDetail extends Component {
    state = {
        info: {}
    }

    render() {
        let {desc, video_local} = this.state.info;
        return (
            <div className="container video-show">
                <h3>{desc}</h3>
                <hr />
                <div className="video-show">
                    <video controls height="100%" 
                            src={video_local 
                                    ? 'http://cdn.xiaohigh.com' + video_local  
                                    : ''}></video>
                </div>
            </div>
        );
    }
    

    //生命周期回调
    async componentDidMount(){
        //
        // let id = 12;
        //1. 获取页面 URL 的 id 参数    针对 params 传参
        // console.log(this.props);
        // let pathname = this.props.location.pathname;
        // //提取 id
        // let id = pathname.split('/').pop();
        
        //2. 获取 id 参数,      针对 query 传参
        // let search = this.props.location.search.slice(1);
        // //解析查询字符串
        // let res = qs.parse(search);
        // let id = res.id;

        //3. 获取 id 参数      针对 state 传参   此种传递有缺陷性, 就是单独打开某个网页, 会出现显示异常 
        // console.log(this.props);  
        let id = this.props.location.state.id;

        //获取指定 id 的视频信息
        let result = await axios.get('http://api.xiaohigh.com/douyin/' + id);
        //保存视频数据
        this.setState({
            info: result.data
        })
    }

}
